<template>
	<view>
		<view class="body after-navber">
		    <view class="top-bar flex-row">
		        <navigator :class="'flex-grow-1 ' + (status == 0 ? 'active' : '')" openType="redirect" url="/pages2/shop/coupon/coupon?status=0">
		            <text>未使用</text>
		        </navigator>
		        <navigator :class="'flex-grow-1 ' + (status == 1 ? 'active' : '')" openType="redirect" url="/pages2/shop/coupon/coupon?status=1">
		            <text>已使用</text>
		        </navigator>
		        <navigator :class="'flex-grow-1 ' + (status == 2 ? 'active' : '')" openType="redirect" url="/pages2/shop/coupon/coupon?status=2">
		            <text>已过期</text>
		        </navigator>
		    </view>
		    <view class="coupon-list" v-if="list && list.length > 0">
		        <block v-for="(coupon, index) in list" :key="item.id">
		            <view :class="'coupon-item coupon-status-' + coupon.status" style="margin-top: 20rpx">
		                <image class="coupon-bg" :src="'/static/images/img-coupon-bg-' + (coupon.status == 0 ? 0 : 1) + '.png'"></image>
		                <image class="coupon-status-icon" :src="'/static/images/img-coupon-status-icon-' + coupon.status + '.png'" v-if="coupon.status != 0"></image>
		                <view class="flex-row" style="height: 100%; overflow: hidden; position: relative">
		                    <view class="flex-grow-0 flex-col flex-y-center flex-x-center coupon-left">
		                        <view class="flex-row flex-y-bottom">
		                            <view class="fs-sm">￥</view>
		                            <view :style="'font-size: ' + (coupon.money.length > 4 ? '13' : '19') + 'pt;line-height: .9'">
		                                {{ coupon.money }}
		                            </view>
		                        </view>
		                        <view class="fs-sm" style="margin-top: 10rpx">满{{ coupon.man }}</view>
		                    </view>
		                    <view class="flex-grow-1 flex-y-center coupon-right">
		                        <view style="width: 100%">
		                            <navigator openType="navigateTo" :url="'/pages/coupon-detail/coupon-detail?user_coupon_id=' + coupon.user_coupon_id">
		                                <view class="flex-row flex-y-center mb-10" style="margin-bottom: 5rpx">
		                                    <view class="flex-grow-1">{{ coupon.event_desc }}</view>
		                                </view>
		                                <view class="fs-sm" style="color: #666666; font-size: 8pt">有效期 : {{ coupon.expires_time_text }}</view>
		               
		                                <text class="user_coupon_font">{{coupon.content}}</text>
		                            </navigator>
		                            <block v-if="coupon.store_ids && coupon.store.length > 0">
		                                <view class="user_coupon_font" style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 87%">
		                                    仅限
		                                    <text v-for="(store, index1) in coupon.store" :key="store.id">{{ store.name }}、</text>
		                                    产品使用
		                                </view>
		                                <block v-if="coupon.store.length > 2">
		                                    <image @tap="xia" class="xia" :data-index="index" :src="__wxapp_img.user.coupon_xia.url" v-if="index != check"></image>
		                                    <image @tap="shou" class="xia" :data-index="index" :src="__wxapp_img.store.shou.url" v-if="index == check"></image>
		                                </block>
		                            </block>
		                            <view
		                                @tap="goodsList"
		                                class="user_coupon_font"
		                                :data-goods_id="coupon.goods"
		                                :data-id="coupon.user_coupon_id"
		                                style="height: 50rpx"
		                                v-if="coupon.appoint_type == 2 && coupon.goods.length > 0"
		                            >
		                                指定商品使用 点进去查看指定商品
		                            </view>
		                        </view>
		                    </view>
		                </view>
		            </view>
		
		            <block v-if="coupon.store.length > 2">
		                <view class="user_coupon" style="padding: 10rpx 24rpx; background: #fff" v-if="check == index">
		                    仅限
		                    <text v-for="(cat, index1) in coupon.store" :key="cat.id">{{ cat.name }}、</text>
		                    产品使用
		                </view>
		            </block>
		        </block>
		    </view>
		    <view style="padding-top: 200rpx; color: #888; text-align: center" v-else>暂无相关优惠券</view>
		</view>
	</view>
</template>

<script>
	import {My} from '../../../apirequest/my-model.js';
	var m = new My();
	export default {
		data() {
			return {
				list:[],
				status:0,
				page:1,
				has_more:true
			}
		},
		onLoad(options) {
			if(options.status){
				this.status = options.status
			}
			this._getList();
		},
		onReachBottom() {
			this._getList();
		},
		methods: {
			_getList(){
				var that = this
				if(!this.has_more){
					return false;
				}
				m.get_my_coupon_list({page:this.page,status:this.status},(res) => {
					if(res.code == 1){
						that.list = that.list.concat(res.data.data)
						that.page = that.page+1
						that.has_more = res.data.has_more
					}
				})
			},
		}
	}
</script>

<style>
.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    border-top: 1rpx solid #e3e3e3;
    border-bottom: 1rpx solid #e3e3e3;
    z-index: 999;
}

.top-bar navigator {
    text-align: center;
}

.top-bar navigator text {
    height: 90rpx;
    line-height: 90rpx;
    border-bottom: 2rpx solid transparent;
    width: auto;
    display: inline-block;
}

.top-bar navigator.active text {
    color: #ff4544;
    border-bottom-color: #ff4544;
}

.coupon-list {
    padding: 122rpx 34rpx 20rpx 34rpx;
}

.coupon-list .coupon-item {
    height: 152rpx;
    width: 682rpx;
    position: relative;
    z-index: 10;
}

.coupon-list .coupon-item.coupon-status-1 .coupon-right,
.coupon-list .coupon-item.coupon-status-2 .coupon-right {
    color: rgba(0, 0, 0, 0.35) !important;
}

.coupon-list .coupon-item .coupon-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.coupon-list .coupon-item .coupon-status-icon {
    width: 140rpx;
    height: 98rpx;
    position: absolute;
    top: 0;
    right: 8rpx;
    z-index: 1;
}

.coupon-list .coupon-item .coupon-left {
    color: #fff;
    width: 202rpx;
}

.coupon-list .coupon-item .coupon-right {
    padding: 20rpx 10rpx;
}

.user_coupon_font {
    color: #666666;
}

.user_coupon {
    color: #666666;
}

.xia {
    position: absolute;
    width: 28rpx;
    height: 28rpx;
    right: 15px;
    bottom: 9px;
}
</style>
